$(() => {
    // 获取元素
    let $username = $("#username");
    let $password = $("#password");
    let $submitBtn = $("#submitBtn");
    let $modelBody = $("#modelBody");
    // 获取模态框元素

    let user_lock = false;
    let pass_lock = false;

    // 用户输入完用户名之后进行正则验证 
    // 当用户名失去焦点的时候    <将策略模式放入libs
    $username.on("blur", () => {
        // 获取用户$username.val()输入的内容
        let userText = $username.val();
        // 验证>>通过策略模式>>验证username是否与userText相等
        let isOK = Strategy.use("username", userText)
            // 判定
        if (!isOK) {
            $modelBody.html("用户名不符合规范");
            $('#myModal').modal({
                    keyboard: false
                })
                // 如果验证不通过,将会用模态框提示用户
            user_lock = false;
            //如果没有通过用户名锁关上;
        } else {
            user_lock = true;
            //如果通过,用户名锁打开;;
        }
    })



    // 用户输入完密码之后进行正则验证

    $password.on("blur", () => {
        // 获取用户输入的内容
        let userText = $password.val();
        // 验证>>>通过策略模式,来验证用户输入的密码是否与数据库密码相同;;
        let isOK = Strategy.use("password", userText)
            // 判定
        if (!isOK) {
            $modelBody.html("密码不符合规范");
            $('#myModal').modal({
                    keyboard: false
                })
                // 如果不通过验证,会用模态框来提示用户
            pass_lock = false;
            // 不通过验证,会将密码锁关上
        } else {
            pass_lock = true;
            // 如果通过验证,密码锁会被打开
        }
    })


    // 绑定提交按钮的点击事件
    $submitBtn.on("click", function() {
        //当提交按钮被点击时;;
        // 判定两把锁是否都开启(一般写法user_lock && pass_lock;一般只有在发送异步的时候,才能有这个缩进,发送同步的时候,不这么写)
        if (!user_lock || !pass_lock) {
            //如果用户名和密码锁有一把关上,就说明有一个没有通过验证
            // 用模态框提示用户 用户名或密码不合规则
            $modelBody.html("请重新检查");
            $('#myModal').modal({
                keyboard: false
            })
            return;
            //只有异步代码,才想换行写else{},同步代码尽量这么写
        }
        // 如果代码可以执行到这里 说明用户名和密码都对
        $.ajax({
            url: "/php/login.php",
            //发送到php里面的登陆php之中;
            data: {
                name: $username.val(),
                psd: $password.val()
            },
            // 这里发送的用户名密码对应的是name,psd;;所以在login.php之中要获取的是name,psd;
            type: "post",
            //用post发送,所以php对应的用post获取;;
            dataType: "json",
            //数据格式用json
            // success(data){}=>data:{error,data}
            //相当于let {data,error} = data;将对象解构:data=data.data  ;;  error = data.error;;
            success({ error, data }) {
                //console.log(data);
                // 登录成功去列表页 登录失败留在本页面
                if (!error) {
                    //解构之后error就可以直接使用;如果登陆成功;
                    // js中的路径跳转 如果是相对路径 以引入该js文件的html路径为准
                    location.href = "./list.html"
                        //本文件被login.html引入之后,就相当于在html文件夹下,所以以html路径为准;;
                }
            }
        })
    })
})